<template>
  <div>
    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <span>分类</span>
      <category-cascader class="queryclass" />
      <span>品牌</span>
      <brand-select class="queryclass" />
      <el-select v-model="queryParam.status" clearable placeholder="请选择">
        <el-option
          v-for="item in defaultStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" small style="margin:10px" size="mini" icon="el-icon-search" @click="queryBtn">查询
      </el-button>
      <!--表格-->
      <el-table :data="listForm" stripe border style="width: 100%">
        <el-table-column prop="id" header-align="center" align="center" label="商品id" />
        <el-table-column prop="spuName" header-align="center" align="center" label="商品名称" />
        <el-table-column prop="spuDescription" header-align="center" align="center" label="商品描述" />
        <el-table-column prop="catalogId" header-align="center" align="center" label="分类id" />
        <el-table-column prop="brandId" header-align="center" align="center" label="品牌id" />
        <el-table-column prop="weight" header-align="center" align="center" label="重量" />
        <el-table-column prop="publishStatus" header-align="center" align="center" label="上架状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.publishStatus == 0">新建</el-tag>
            <el-tag v-if="scope.row.publishStatus == 1">已上架</el-tag>
            <el-tag v-if="scope.row.publishStatus == 2">已下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" />
        <el-table-column prop="updateTime" header-align="center" align="center" label="修改时间" />
        <!--操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.publishStatus !== 1" v-hasPermi="['admin','product:spuinfo:up']" type="text" size="mini" @click="up(scope.row.id)">上架</el-button>
            <el-button v-hasPermi="['admin','product:spuinfo:del']" type="text" size="mini" @click="attrUpdateShow(scope.row)">规格</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
        background
        :current-page="pageNumber"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { listSpuInfo, spuUp } from '@/api/product/spuinfo'

import CategoryCascader from '@/views/modules/common/category-cascader'
import BrandSelect from '@/views/modules/common/brand-select'

export default {
  name: 'Spu',
  components: { CategoryCascader, BrandSelect },
  props: {},
  data() {
    return {
      pageNumber: 1,
      pageSize: 10,
      total: 1,
      defaultStatus: [{
        value: 0,
        label: '新建'
      }, {
        value: 1,
        label: '上架'
      }, {
        value: 2,
        label: '下架'
      }],
      listForm: [],
      queryParam: {
        status: '',
        catalogId: '',
        brandId: ''
      }
    }
  },
  // 生命周期-创建完成（可以访问当前this实例）
  created() {
    // 初始化列表
    this.initListSpuInfo()
  },
  // 生命周期-挂载完成（可以访问DOM元素）
  mounted() {
    this.PubSub.subscribe('catPath', (msg, val) => {
      this.queryParam.catalogId = val[val.length - 1]
    })
    this.PubSub.subscribe('brandId', (msg, val) => {
      this.brandId = val
    })
  },
  methods: {
    // 查询按钮
    queryBtn() {
      this.initListSpuInfo()
    },

    // 上架按钮
    up(id) {
      spuUp(id).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
          // 刷新数据
          this.initListSpuInfo()
        }
      })
    },
    attrUpdateShow(row) {
      this.$router.push({
        path: '/product/attrupdate',
        query: { spuId: row.id, catalogId: row.catalogId }
      })
    },

    // 监听当前页的事件
    handleCurrentChange(pageIndex) {
      this.pageNumber = pageIndex
      this.initListSpuInfo()
    },

    // 监听当前页的条数事件
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.initListSpuInfo()
    },

    // 监听添加对话框的关闭事件，重置表单内容
    addHandleClose() {
      this.$refs.addFormRef.resetFields()
    },

    // 监听编辑对话框的关闭事件,重置表单内容
    editHandleClose() {
      this.$refs.editFormRef.resetFields()
    },

    // 初始化数据
    initListSpuInfo() {
      const params = {
        pageNum: this.pageNumber,
        pageSize: this.pageSize,
        catalogId: this.queryParam.catalogId,
        brandId: this.brandId,
        publishStatus: this.queryParam.status,
        priceMin: this.queryParam.priceMin,
        priceMax: this.queryParam.priceMax
      }
      listSpuInfo(params).then(res => {
        this.listForm = res.data.records
        this.total = res.data.total
        this.pageNum = res.data.current
      })
    }
  }
}
</script>

<style scoped>
.queryclass{
  display: inline-block;
  margin: 10px;
}

</style>
